<template>
<card-wrapper class="wrapper">
  <el-container class="container">
    <div class="position" v-if="this.sendingPosition && selectedPosition">
      <position-message-ele :position="selectedPosition"></position-message-ele>
<!--      <el-button :icon="Close" />-->
    </div>
    <el-main class="message-list">
      <el-scrollbar class="scrollbar" id="message-scroll-list" ref="scrollbarRef">
        <div v-for="message in messageList" :key="message.id">
          <sender-message-ele :message="message" :contact="contact"></sender-message-ele>
        </div>
      </el-scrollbar>
    </el-main>
    <el-footer class="input-box">
      <div class="upload-parent">
        <el-upload
            :http-request="uploadFile"
            :show-file-list="false"
        >
          <template #trigger>
            <el-button type="primary">发送文件/图片</el-button>
          </template>
        </el-upload>
      </div>
      <el-input class="input" type="textarea" :rows="3" placeholder="请输入消息" v-model="messageText"></el-input>
      <el-button type="primary" @click="sendOnClick">发送</el-button>
      <el-button type="primary" @click="scrollToBottom">滚到底部</el-button>
    </el-footer>
  </el-container>
</card-wrapper>
</template>

<script>
import {ref, onMounted, watch} from 'vue';
import CardWrapper from "@/CardWrapper.vue";
import SenderMessageEle from "@/views/ChatView/MessageEle/SenderMessageEle.vue";
import {createGeneralKey, createKey, uploadObj} from "@/utils/obs.ts";
import {useSocketStore} from "@/stores/socket";
import {ElMessage} from "element-plus";
import PositionMessageEle from "@/views/ChatView/MessageEle/PositionMessageEle.vue";
import {Close} from "@element-plus/icons-vue";
import {useAccountStore} from "@/stores/account";

export default {
  name: "ChatBox",
  computed: {
    Close() {
      return Close
    }
  },
  components: {PositionMessageEle, SenderMessageEle, CardWrapper},
  props: {
    messageList: {
      type: Array,
      default: () => []
    },
    contact: {
      type: Object,
    },
    selectedPosition: {
      type: Object,
    },
  },
  data() {
    return {
      accountStore: useAccountStore(),
      socketStore: useSocketStore(),
      messageText: "",
      sendingPosition: true
    };
  },
  setup() {
    const scrollbarRef = ref(null);
    const scrollToBottom = () => {
      const scrollbar = scrollbarRef.value;
      if (scrollbar) {
        scrollbar.setScrollTop(scrollbar.wrapRef.scrollHeight);
      }
    };

    const delayScrollToBottom = () => {
      setTimeout(() => {
        scrollToBottom();
      }, 300);
    }

    return {
      scrollbarRef,
      scrollToBottom,
      delayScrollToBottom
    };
  },
  created() {
    watch(
      () => this.messageList,
      (newValue, oldValue) => {
        this.delayScrollToBottom();
      }
    );
    this.delayScrollToBottom();
  },
  methods: {
    sendOnClick() {
      if (this.messageText === "") {
        ElMessage.error("消息不能为空");
        return;
      }

      this.trySendPosition();

      this.$emit("send", {
        msgType: 'text',
        messageContent: this.messageText,
        file: null,
      });
      this.messageText = "";

      this.delayScrollToBottom();
    },
    uploadFile(options) {
      const key = createGeneralKey(options.file.name);
      uploadObj(options.file, key);
      this.trySendPosition();

      setTimeout(() => {
        this.$emit("send", {
          msgType: 'file',
          messageContent: options.file.name,
          file: key,
        });
      }, 200);
    },

    trySendPosition() {
      if (this.sendingPosition) {
        if (this.selectedPosition) {
          this.$emit("send", {
            msgType: 'position',
            messageContent: JSON.stringify(this.selectedPosition),
            file: null,
          })
        }
        this.sendingPosition = false;
      }
    },
  },
}
</script>

<style scoped>
.wrapper {
  height: 100%;
}
.container {
  position: relative;
  height: 100%;
  width: 100%;
}
.message-list {
  height: calc(100% - 160px);
  width: 100%;
  padding: 0 10px 0 10px;
}
.input-box {
  border-top: 1px solid #ccc;
  height: 160px;
  width: 100%;
}
.scrollbar {
  width: 100%;
}
.upload-parent {
  margin: 10px 0 0 0;
}
.position {
  position: absolute;
  pointer-events: auto;
  top: 0;
  right: 0;
}
</style>